<template>

    <div id="login">
        <el-form :model="userInfo" :rules="rules" ref="userForm">
            <div class="login-box">
                <div class="login-header">
                    <el-row :gutter="24">
                        <el-col :span="14" :offset="1"><span class="title">订餐系统重置密码</span></el-col>
                        <el-col :span="6" :offset="1">
                            <span>想起来了？ </span><router-link to="/login"> 去登陆</router-link>
                        </el-col>
                    </el-row>
                </div>
                <div class="login-info">
                    <el-row>
                        <el-col>
                            <el-form-item prop="email">
                                <el-input v-model="userInfo.email" placeholder="请输入登录帐号">
                                    <template slot="prepend">登录账号</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item prop="name">
                                <el-input v-model="userInfo.name" placeholder="请输入姓名">
                                    <template slot="prepend">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item prop="password">
                                <el-input v-model="userInfo.password" type="password" placeholder="请输入密码">
                                    <template slot="prepend">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item prop="config_password">
                                <el-input v-model="userInfo.config_password" type="password" placeholder="请再次输入密码">
                                    <template slot="prepend">确认密码</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-button @click="doRegister('userForm')" style="width:100%" type="primary" :loading="btn_loading">提交</el-button>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        name: 'register',
        data () {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.userInfo.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                userInfo: {
                    email: '',
                    name : '',
                    password : '',
                    config_password: ''
                },
                btn_loading: false,
                rules: {
                    email: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { min: 3, message: '长度不能小于3个字符', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                        { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 29, message: '长度在 6 到 29 个字符', trigger: 'blur' }
                    ],
                    config_password: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                }
            }
        },
        methods : {
            doRegister (formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.btn_loading = true;
                        axios.post('/api/api/forgotPassword',this.userInfo)
                            .then(res => {
                                if(res.data.status === 200){
                                    this.$message.success('重置成功!');
                                    this.$router.push({path:'/login'})
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                                this.btn_loading = false;
                            })
                            .catch(err => {
                                this.btn_loading = false;
                                this.$message.error('服务器异常');
                            })
                    } else {
                        return false;
                    }
                });

            }
        }
    }
</script>

<style scoped>
    #login {
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url("/src/assets/bg.jpg");
        background-repeat: no-repeat;
    }
    .login-header {
        background-color: #cccccc;
        position: relative;
        top: 0;
        height: 50px;
        border-radius: 4px;
        color: #409EFF;
        line-height: 50px;
    }
    .title {
        font-size: 18px;
        font-weight: 700;
        text-align: center;
    }
    .login-info {
        width: 400px;
        margin: 0 auto;
        height: 300px;
        position: relative;
        top:10%;
        border-radius: 4px
    }
    .login-box {
        margin:0 auto;
        margin-top: 50px;
        height: 450px;
        width: 500px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        position: relative;
        border-radius: 4px;
    }
</style>